<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>插槽示例</title>
    </head>
    <body>
        <div id="app">
            <cpn1>
                <span>原来如此</span></cpn1>
            <cpn1>
                <button type="button">也是可以的</button>
            </cpn1>
            <cpn1>
                <p>插槽的使用案例</p>
            </cpn1>
            <!-- 这里会使用默认值 -->
            <cpn1></cpn1>

            <cpn2>
                <!-- 会替换没有名字的插槽 -->
                <span>标题</span>
                <!-- 具体替换slot的name是 left 的插槽 -->
                <span slot="left"><button type="button" name="back">&lt;-</button></span>
            </cpn2>
        </div>
    </body>
    <template id="cpn1">
        <div class="">
            <h1>第一个模版</h1>
            <!-- 组件的插槽的目的是为了让封装的组件更加具有扩展性 -->
            <!-- 将有共性的组件的共性抽取出来进行封装 -->
            <!-- 在slot标签中添加默认值 -->
            <slot>
                <p style="color: blue">插槽的默认值</p>
            </slot>
        </div>
    </template>
    <template id="cpn2">
        <div>
            <slot name="left">
                <span>左边</span></slot>
            <slot name="center">
                <span>中间</span></slot>
            <slot name="right">
                <span>右边</span></slot>
        </div>
    </template>
    <script src="../js/vue.js" charset="utf-8"></script>
    <script type="text/javascript">
        const app = new Vue({
            el: '#app',
            data: {},
            computed: {},
            filters: {},
            components: {
                cpn1: {
                    template: '#cpn1'
                },
                cpn2: {
                    template: '#cpn2'
                }
            }
        });
    </script>
</html>
